<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>预约信息</title>
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
		<style>
			.custom-header {
				background-color: #f8f9fa;
				padding: 10px;
				display: flex;
				align-items: center;
			}

			.custom-header .back-icon {
				margin-right: 15px;
			}

			.status-tag {
				background-color: #4a90e2;
				color: white;
				padding: 5px 15px;
				border-radius: 5px;
			}

			.section {
				margin: 20px 0;
			}

			.info-item {
				padding: 10px 0;
				border-bottom: 1px solid #dee2e6;
			}

			.info-label {
				width: 120px;
			}

			.fault-image,
			.finish-image {
				width: 80px;
				height: 80px;
				background-color: #e9ecef;
				margin-right: 10px;
			}

			.charge-item {
				padding: 10px 0;
				border-bottom: 1px solid #dee2e6;
			}

			.total-price {
				color: #dc3545;
				font-weight: bold;
			}

			.timeline {
				position: relative;
				padding-left: 30px;
			}

			.timeline::before {
				content: "";
				position: absolute;
				top: 0;
				left: 10px;
				width: 2px;
				height: 100%;
				background-color: #dee2e6;
			}

			.timeline-item {
				margin-bottom: 20px;
			}

			.timeline-item::before {
				content: "";
				position: absolute;
				left: -12px;
				width: 16px;
				height: 16px;
				border-radius: 50%;
				background-color: white;
				border: 2px solid #6c757d;
			}

			.timeline-item.done::before {
				background-color: #28a745;
			}

			.fixed-bottom-tool {
				position: fixed;
				bottom: 60px;
				right: 15px;
			}

			.bottom-nav {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				background-color: white;
				border-top: 1px solid #dee2e6;
				padding: 8px 0;
			}

			.nav-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				text-decoration: none;
				color: #6c757d;
				font-size: 14px;
				padding: 0 15px;
			}

			.nav-item.active {
				color: #007bff;
			}

			.nav-icon {
				font-size: 20px;
				margin-bottom: 3px;
			}

			.paid-seal {
				position: absolute;
				left: 20px;
				top: 20px;
				transform: rotate(-10deg);
				color: #93c5fd;
				font-size: 14px;
			}

			.custom-header a {
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<div class="custom-header">
			<a href="YiWanCheng.html"><span class="back-icon">←</span></a>

			<h5 class="mb-0">预约信息</h5>
			<div class="ms-auto">
				<a href="#" class="text-dark"><i class="bi bi-three-dots-vertical"></i></a>
				<a href="#" class="text-dark ms-3"><i class="bi bi-eye"></i></a>
			</div>
		</div>
		<input type="hidden" id="wid" />
		<input type="hidden" id="uid" />
		<div class="container px-4">
			<div class="row g-3">
				<div class="col-12">
					<div class="d-flex justify-content-between align-items-center mb-3">
						<span>维修单号：AA222222222 <i class="bi bi-file-earmark"></i></span>
						<span class="status-tag">已完成</span>
					</div>
				</div>
			</div>

			<div class="section">
				<div class="card">
					<div class="card-body p-0">
						<div class="info-item">
							<span class="info-label">故障位置：</span>
							<span id="faultLocationDetail"></span>
							<input type="hidden" id="uid">
							<input type="hidden" id="wid">
						</div>
						<div class="info-item">
							<span class="info-label">维修日期：</span>
							<span class="text-warning" id="repairDateDetail"></span>
						</div>
						<div class="info-item">
							<span class="info-label">联系人：</span>
							<span id="contactNameDetail"></span>
						</div>
						<div class="info-item">
							<span class="info-label">联系电话：</span>
							<span id="contactPhoneDetail"></span>
						</div>
						<div class="info-item">
							<span class="info-label">故障描述：</span>
							<span id="faultReasonDetail"></span>
						</div>
						<div class="info-item">
							<span>故障图片:</span>
							<div class="d-flex gap-2">
								<div class="bg-gray-200" style="width: 80px; height: 60px;">
									<!-- 使用 img 标签显示图片 -->
									<img id="faultImage1" src="" alt="故障图片1"
										style="width: 100%; height: 100%; object-fit: cover;">
								</div>
								<div class="bg-gray-200" style="width: 80px; height: 60px;">
									<!-- 使用 img 标签显示图片 -->
									<img id="faultImage2" src="" alt="故障图片2"
										style="width: 100%; height: 100%; object-fit: cover;">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="charge-item">
				<h5>收费项</h5>
				<div id="shoufei"></div>
			</div>


			<div class="section">
				<div class="card">
					<div class="card-body p-0">
						<div class="timeline">
							<div class="timeline-item">
								<span class="timeline-item">
									<span class="text-primary">发起人</span><br>
									<span>王文州</span>
									<span class="text-primary">发起</span>
									<span class="text-secondary">2024-6-24 10:22</span>
								</span>
							</div>
							<div class="timeline-item done">
								<span class="timeline-item">
									<span class="text-primary">文员审批</span><br>
									<span>李欧</span>
									<span class="text-success">已通过</span>
									<span class="text-secondary">2024-6-24 14:10</span>
								</span>
							</div>
							<div class="timeline-item done">
								<span class="timeline-item">
									<span class="text-primary">主管审批</span><br>
									<span>冯总</span>
									<span class="text-success">已通过</span>
									<span class="text-secondary">2024-6-24 14:10</span>
								</span>
							</div>
							<div class="timeline-item done">
								<span class="timeline-item">
									<span class="text-primary">完成</span>
								</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="fixed-bottom-tool">
			<button class="btn btn-light border rounded-pill px-3 py-2">
				工单管理
			</button>
			<button class="btn btn-primary rounded-pill px-3 py-2 ms-2">
				查看评价
			</button>
		</div>

		<nav class="bottom-nav">
			<div class="container d-flex justify-content-around">
				<a href="#" class="nav-item">
					<i class="bi bi-house nav-icon"></i>
					首页
				</a>
				<a href="#" class="nav-item active">
					<i class="bi bi-wrench nav-icon"></i>
					报障维修
				</a>
				<a href="#" class="nav-item">
					<i class="bi bi-person nav-icon"></i>
					我的
				</a>
			</div>
		</nav>

		<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
		<script src="js/jquery.js"></script>
		<script src="../js/request/base.js"></script>
		<script src="js/script/YYXXYWC.js"></script>
	</body>
</html>